<template>
  <div>
    <customDialog
      :title="`${title}`"
      :dialogVisible="dialogVisible"
      @close="closeDialog(ruleFormRef)"
      @confirm="confirmDialog(ruleFormRef)"
      width="800"
    >
      <el-form
        ref="ruleFormRef"
        :model="formData"
        :rules="rules"
        class="form_box"
        :label-width="85"
        label-position="left"
      >
        <el-form-item label="小程序" prop="id">
          <el-select v-model="formData.id" placeholder="请选择">
            <el-option
              v-for="(item, index) in optionsApps"
              :key="index"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="充值模板" prop="templateId">
          <el-select
            v-model="formData.templateId"
            placeholder="请选择"
            @change="changeTemplate"
          >
            <el-option
              v-for="(item, index) in optionsTemplate"
              :key="index"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <p class="grey" style="margin-bottom: 12px">
        <el-alert
          title="在这里可以配置默认的充值模板，也可以在推广管理中对每部剧集单独配置"
          type="warning"
          :closable="false"
        />
      </p>

      <!-- 模板 -->
      <defaultTemplate ref="baseTemplateRef" :isHover="false" />
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import defaultTemplate from "@/components/DefaultRechargeTemlate/defaultTemlate.vue";
import {
  appsOptions,
  appsTemplate,
} from "@/api/globalManage/appletRoute/index";
import {
  listForSelector,
  getById,
} from "@/api/globalManage/defaultTemplate/index";
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import type { FormInstance } from "element-plus";

const ruleFormRef = ref<FormInstance>();
const form = {
  id: "",
  templateId: "",
};
interface optionsModel {
  text: string;
  value: number;
}

const formData = ref(Object.assign({}, form));
const optionsApps = ref<Array<optionsModel>>([]);
const optionsTemplate = ref<Array<optionsModel>>([]);
const title = ref<string>("");
const dialogVisible = ref<boolean>(false);

const rules = reactive({
  id: [{ required: true, message: "请选择小程序", trigger: "change" }],
  templateId: [
    { required: true, message: "请选择充值模板", trigger: "change" },
  ],
});

// 关闭
const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl?.resetFields();
  dialogVisible.value = false;
};

// 成功
const emit = defineEmits(["success"]);
const confirmDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      appsTemplate(formData.value).then(() => {
        emit("success");
        ElMessage.success("设置成功");
        dialogVisible.value = false;
      });
    }
  });
};

// 切换模板
const baseTemplateRef = ref();
const changeTemplate = (val: number) => {
  const id: number = val;
  getById(id).then((res: Record<string, any>) => {
    nextTick(() => {
      baseTemplateRef.value.relationDtoList = JSON.parse(
        JSON.stringify(res?.items)
      );
    });
  });
};

// 获取小程序list
const getTemp = () => {
  appsOptions({}).then((res: any) => {
    optionsApps.value = res;
  });
};

// 获取下拉充值模板list
const getTemplateList = () => {
  listForSelector({}).then((res: Record<string, any>) => {
    optionsTemplate.value = JSON.parse(JSON.stringify(res)) || [];
  });
};

// 父级电子显示dialog
const showDialog = (val: any) => {
  // console.log(111, val);
  dialogVisible.value = true;
  title.value = val ? `设置充值模板-${val?.appName}` : "提示";
  getTemp();
  getTemplateList();
};

defineExpose({
  showDialog,
});
</script>
<style scoped lang="scss"></style>
